<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>电影列表</span>
          <el-button class="button" @click="show = true" text
            >添加电影</el-button
          >
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="id" />
        <el-table-column prop="title" label="电影名称" />
        <el-table-column prop="actor" label="演员" />
        <el-table-column prop="imgUrl" label="电影封面">
          <template #default="scope">
            <img :src="scope.row.imgUrl" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="director" label="导演" />
        <el-table-column prop="category_id" label="所属类型">
          <template #default="scope">{{
            getCinemaInfo(scope.row.category_id)
          }}</template>
        </el-table-column>
        <el-table-column prop="sales" label="销量" />

        <el-table-column prop="createdAt" label="创建时间">
          <template #default="scope">{{ Time(scope.row.createdAt) }}</template>
        </el-table-column>
        <el-table-column prop="id" label="操作">
          <template #default="scope">
            <el-button @click="edit(scope.row.id)">修改</el-button>
            <el-button @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="show" title="添加/修改影厅" width="800">
      <el-form :model="form" label-position="left" label-width="140px">
        <el-form-item label="电影名称">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="演员">
          <el-input v-model="form.actor" autocomplete="off" />
        </el-form-item>
        <el-form-item label="导演">
          <el-input v-model="form.director" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属类型">
          <el-select
            v-model="form.category_id"
            class="m-2"
            placeholder="请选择"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in cinemaList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="电影封面">
          <el-upload
            ref="upload"
            class="upload-demo"
            action=""
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            :on-change="chage"
          >
            <template #trigger>
              <el-button type="primary">上传图片</el-button>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="提交">
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { Try, Time } from "@/utils";
import { genFileId } from "element-plus";
import { getMovie, postMovie, putMovie, delMovie, getMovieType } from "@/api";
const upload = ref();
const show = ref(false);
const tableData = ref([]);
const cinemaList = ref([]);
const form = reactive({
  category_id: "",
  title: "",
  actor: "",
  director: "",
  id: "",
  imgUrl: "",
});
const chage = (file) => {
  const reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    console.log("图片转为 base64:", reader.result);
    form.imgUrl = reader.result;
  };
};
const handleExceed = (files) => {
  console.log(files);
  const file = files[0];

  file.uid = genFileId();
};
function getCinemaInfo(id) {
  const cinema = cinemaList.value.find((item) => item.id == id);
  return cinema ? cinema.name : null;
}
function getType() {
  Try(async () => {
    const res = await getMovieType();
    if (res.code === 200) {
      cinemaList.value = res.data;
    }
  });
}
function getlist() {
  Try(async () => {
    const res = await getMovie();
    console.log(res);
    if (res.code === 200) {
      tableData.value = res.data;
    }
  });
}
function submit() {
  Try(async () => {
    const { id } = form;
    const res = id ? await putMovie(form) : await postMovie(form);
    console.log(res);
    if (res.code === 200) {
      ElMessage.success(res.message);
      show.value = false;
      getlist();
      form.name = "";
      form.seats = "";
      form.cinema_id = "";
      form.id = "";
    } else {
      ElMessage.error(res.message);
    }
  });
}
function edit(id) {
  Try(async () => {
    const res = await getMovie({ id });
    if (res.code === 200) {
      show.value = true;
      const { title, category_id, actor, director, id, imgUrl } = res.data[0];
      form.title = title;
      form.category_id = category_id;
      form.actor = actor;
      form.director = director;
      form.id = id;
      form.imgUrl = imgUrl;
    }
  });
}
function del(id) {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    Try(async () => {
      const res = await delMovie({ id });
      if (res.code === 200) {
        ElMessage.success(res.message);
        getlist();
      }
    });
  });
}
onMounted(() => {
  getlist();
  getType();
});
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
</style>
